<template>
  <div class="boxcon">
    <!-- -->
    <div class="con">
          <div class="topbtn">
             <span></span>
             <el-button type="primary" @click="addbingwang" class="last-el-button">新增并网点</el-button>
          </div>
          <div class="mytable">
           <el-table id="demo" ref="table" height="100%" border  stripe :data="tableData" 
            style="width: 100%">
            <!-- <el-table-column type="selection" width="60" align="center"></el-table-column> -->
            <el-table-column label="序号" type="index" width="60" align="center"> </el-table-column>
            <el-table-column prop="desc" label="描述" min-width="200" ></el-table-column>
            <el-table-column prop="offset" label="偏移值" min-width="120"> </el-table-column>
            <el-table-column prop="unit_type" label="类型" min-width="160"> </el-table-column>
            <el-table-column prop="group_total" label="群组总功率" min-width="180"> </el-table-column>
    
            <el-table-column label="操作" width="180" align="center">
              <template #default="{row}">
                <div class="public-flex" >
                  <span style="color:#368ed9;cursor: pointer;margin-right:12px" @click="viewinverters(row)">查看逆变器</span>
                  <span style="color:#368ed9;cursor: pointer;margin-right:12px" @click="editbingwang(row)">编辑</span>
                  <span style="color:red;cursor: pointer;" @click="delbingwang(row)">删除</span>
                </div>
              </template>
            </el-table-column>
          </el-table>
         </div>
          <!-- 新增/修改并网点 -->
           <el-dialog width="500px" draggable  :title="caozuoType" :close-on-click-modal='false' :visible.sync="addeditflagline">
                    <div class="choicedio">
                         <div class="infoitems">
                             <div class="items" style="width:100%">
                                <div class="leftname">描述：</div>
                                <el-input v-model="nowItem.desc" placeholder="请输入描述"></el-input>
                            </div>
                         </div>
                         <div class="infoitems">
                             <div class="items" style="width:100%">
                                <div class="leftname">偏移值：</div>
                                <el-input v-model="nowItem.offset" placeholder="请输入偏移值"></el-input>
                            </div>
                         </div>
                         <div class="infoitems">
                             <div class="items" style="width:100%">
                                <div class="leftname">类型：</div>
                                <el-input v-model="nowItem.unit_type" placeholder="请输入类型"></el-input>
                            </div>
                         </div>
                         <div class="infoitems">
                             <div class="items" style="width:100%">
                                <div class="leftname">群组总功率：</div>
                                <el-input v-model="nowItem.group_total" placeholder="请输入群组总功率"></el-input>
                            </div>
                         </div>
                    </div>
                    <div class="el-loading-mask" v-show="diaisMask">
                                    <div class="el-loading-spinner">
                                    <svg viewBox="25 25 50 50" class="circular">
                                        <circle cx="50" cy="50" r="20" fill="none" class="path"></circle>
                                    </svg>
                           </div>
                     </div>
                   <div slot="footer" class="dialog-footer">
                            <el-button  @click="addeditflagline = false" >取 消</el-button>
                            <el-button  class="last-el-button" @click="addpassageway" type="primary">确 定</el-button>
                    </div>
                      
                    
           </el-dialog>
          <div class="el-loading-mask" v-show="isMask">
                                    <div class="el-loading-spinner">
                                    <svg viewBox="25 25 50 50" class="circular">
                                        <circle cx="50" cy="50" r="20" fill="none" class="path"></circle>
                                    </svg>
                           </div>
         </div>
         <!-- 新增/修改 -->
           <el-dialog width="800px" draggable  :title="caozuoType2" :close-on-click-modal='false' :visible.sync="nibianqi">
                    <div class="choicedio" style="height:450px;padding:12px">
                         <div class="topbtn">
                             <span></span>
                             <el-button type="primary" @click="addnibianqi" class="last-el-button">新增逆变器</el-button>
                         </div>
                         <div class="mytable">
                            <el-table id="demo" ref="table" height="100%" border  stripe :data="invertersTableData"  style="width: 100%">
                                    <el-table-column label="序号" type="index" width="60" align="center"> </el-table-column>
                                    <el-table-column prop="name" label="名称" min-width="180" ></el-table-column>
                                    <el-table-column prop="type" label="类型" width="100"> </el-table-column>
                                    <el-table-column prop="reg_addr" label="寄存器地址" width="120"> </el-table-column>
                                    <el-table-column prop="enable" label="状态" width="100" align="center"> 
                                      <template #default="{row}">
                                        <div class="public-flex" >
                                        <span v-show="row.enable == 1">启用</span>
                                        <span v-show="row.enable != 1">禁用</span>
                                        </div>
                                    </template>
                                    </el-table-column>
                                    <el-table-column prop="rated" label="逆变器功率" width="90"> </el-table-column>
                                    <el-table-column label="操作" width="120" align="center">
                                    <template #default="{row}">
                                        <div class="public-flex" >
                                        <span style="color:#368ed9;cursor: pointer;margin-right:12px" @click="editnibianqi(row)">编辑</span>
                                        <span style="color:red;cursor: pointer;" @click="delnibianqi(row)">删除</span>
                                        </div>
                                    </template>
                                    </el-table-column>
                                </el-table>
                         </div>
                    </div>
                    <div class="el-loading-mask" v-show="diaisMask">
                                    <div class="el-loading-spinner">
                                    <svg viewBox="25 25 50 50" class="circular">
                                        <circle cx="50" cy="50" r="20" fill="none" class="path"></circle>
                                    </svg>
                           </div>
                     </div>
                   <div slot="footer" class="dialog-footer">
                            <el-button  @click="nibianqi = false" class="last-el-button">关 闭</el-button>
                            <!-- <el-button  class="last-el-button" @click="addpassageway" type="primary">确 定</el-button> -->
                    </div>
                      
                    
           </el-dialog>
            <!-- 新增/修改逆变器 -->
           <el-dialog width="500px" draggable  :title="caozuoType3" :close-on-click-modal='false' :visible.sync="addInverters">
                    <div class="choicedio">
                         <div class="infoitems">
                             <div class="items" style="width:100%">
                                <div class="leftname">名称：</div>
                                <el-input v-model="nowItemnibianqi.name" placeholder="请输入名称"></el-input>
                            </div>
                         </div>
                         <div class="infoitems">
                             <div class="items" style="width:100%">
                                <div class="leftname">类型：</div>
                                <el-input v-model="nowItemnibianqi.type" placeholder="请输入类型"></el-input>
                            </div>
                         </div>
                         <div class="infoitems">
                             <div class="items" style="width:100%">
                                <div class="leftname">寄存器地址：</div>
                                <el-input v-model="nowItemnibianqi.reg_addr" placeholder="请输入寄存器地址"></el-input>
                            </div>
                         </div>
                         <div class="infoitems">
                             <div class="items" style="width:100%">
                                <div class="leftname">状态：</div>
                                <el-select v-model="nowItemnibianqi.enable" placeholder="请选择状态" style="width:100%"> 
                                                <el-option
                                                   v-for="item in enableList"
                                                   :key="item.value"
                                                   :label="item.label"
                                                   :value="item.value">
                                                </el-option>
                                 </el-select>
                                
                            </div>
                         </div>
                         <div class="infoitems">
                             <div class="items" style="width:100%">
                                <div class="leftname">逆变器功率：</div>
                                <el-input v-model="nowItemnibianqi.rated" placeholder="请输入逆变器功率"></el-input>
                            </div>
                         </div>
                    </div>
                    <div class="el-loading-mask" v-show="diaisMask">
                                    <div class="el-loading-spinner">
                                    <svg viewBox="25 25 50 50" class="circular">
                                        <circle cx="50" cy="50" r="20" fill="none" class="path"></circle>
                                    </svg>
                           </div>
                     </div>
                   <div slot="footer" class="dialog-footer">
                            <el-button  @click="addInverters = false" >取 消</el-button>
                            <el-button  class="last-el-button" @click="addInvertersFn" type="primary">确 定</el-button>
                    </div>
                      
                    
           </el-dialog>
    </div>
  </div>
</template>

<script>
import {getgridConnectGroup,addgridConnectGroup,editgridConnectGroup,delgridConnectGroup,getInverters,saveInverters,editInverters,delInverters} from "../../api/dataComparisonApi";
export default {
  

  data() {
    return {
      tableData:[],
      invertersTableData:[],
      caozuoType:"新增并网点",
      caozuoType2:"逆变器",
      caozuoType3:"新增逆变器",
      addeditflagline:false,
      diaisMask:false,
      addInverters:false,
      nibianqi:false,
      isMask:false,
      nowItem:{
         desc:"",
        offset:"",
        unit_type:"",
        group_total:"",
      },
      nowBingwangdian:{},
      enableList:[
        {
          label:"启用",
          value:1,
        },
        {
          label:"禁用",
          value:0,
        },
      ],
      nowItemnibianqi:{
        name:"",
        type:"",
        reg_addr:"",
        enable:1,
        rated:"",
        grid_connect_group_id:"",
      },
      editRowNibianqi:{},
    };
  },

  mounted() {
     this.getList()
  },

  methods: {
    getList(){
         this.isMask = true
         getgridConnectGroup().then(res => { 
            this.isMask = false
               if(res != undefined){
                   console.log("获取并网点列表",res);
                   this.tableData = res
               }
         })
    },
    addbingwang(){
        this.caozuoType = "新增并网点"
        this.nowItem = {
         desc:"",
        offset:"",
        unit_type:"",
        group_total:"",
      }
      this.addeditflagline = true
    },
    editbingwang(row){
           this.nowItem = row
           this.caozuoType = "修改并网点"
           this.addeditflagline = true
    },
     //新增修改并网点
     addpassageway(){
        if(this.nowItem.desc === ""){
              this.$message({showClose: true,message: '描述不能为空',type: 'warning'});
              return
        }
        if(this.nowItem.offset === ""){
              this.$message({showClose: true,message: '偏移值不能为空',type: 'warning'});
              return
        }
        if(this.nowItem.unit_type === ""){
              this.$message({showClose: true,message: '类型不能为空',type: 'warning'});
              return
        }
        if(this.nowItem.group_total === ""){
              this.$message({showClose: true,message: '群组总功率不能为空',type: 'warning'});
              return
        }
        if(this.caozuoType == "新增并网点"){
              var dd = {
                  desc:this.nowItem.desc,
                  offset:Number(this.nowItem.offset),
                  unit_type:Number(this.nowItem.unit_type),
                  group_total:Number(this.nowItem.group_total),
              }
              this.diaisMask = true
              addgridConnectGroup(dd).then(res => {
                   this.diaisMask = false
                   if(res.code == 200){
                       this.addeditflagline = false
                      this.getList()
                      this.$message({showClose: true,message: '新增成功',type: 'success'});
                   }else {
                      this.$message({showClose: true,message: res.msg ? res.msg : '新增失败',type: 'error'});
                   }
              })
        }else {
             var dd = {
                  id:Number(this.nowItem.id),
                  desc:this.nowItem.desc,
                  offset:Number(this.nowItem.offset),
                  unit_type:Number(this.nowItem.unit_type),
                  group_total:Number(this.nowItem.group_total),
              }
              this.diaisMask = true
              editgridConnectGroup(dd).then(res => {
                   this.diaisMask = false
                   if(res.code == 200){
                     this.addeditflagline = false
                      this.getList()
                      this.$message({showClose: true,message: '修改成功',type: 'success'});
                   }else {
                      this.getList()
                      this.$message({showClose: true,message: res.msg ? res.msg : '修改失败',type: 'error'});
                   }
              })
        }
     },
     //删除并网点
     delbingwang(row){
          this.$confirm(`是否要删除此并网点？`,'提示',{
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
                this.isMask = true
               delgridConnectGroup({'id':row.id}).then(res => {
                  if(res.code == 200){
                      this.getList()
                      this.$message({showClose: true,message: '删除成功',type: 'success'});
                   }else {
                    this.isMask = false
                      this.$message({showClose: true,message: res.msg ? res.msg : '删除失败',type: 'error'});
                   }
                 
               }).catch(error => {
               })
              
        
                      
            }).catch(() => {
              // ...
            });
     },
     //查看逆变器
     viewinverters(row){
         this.nowBingwangdian = row
         this.nibianqi = true
         this.diaisMask = true
         this.getNibianqi()
     },
     //查询逆变器
     getNibianqi(){
      getInverters({'grid_connect_group_id':this.nowBingwangdian.id}).then(res => {
              console.log("查询逆变器",res);
              this.diaisMask = false
              if(res != undefined){
                  this.invertersTableData = res
              }
         })
     },
     //新增逆变器
     addnibianqi(){
       this.caozuoType3 = '新增逆变器'
       this.nowItemnibianqi = {
            name:"",
            type:"",
            reg_addr:"",
            enable:"",
            rated:"",
            grid_connect_group_id:this.nowBingwangdian.id,
        }
        this.addInverters = true
     },
     //修改逆变器
     editnibianqi(row){
       this.caozuoType3 = '修改逆变器'
       this.editRowNibianqi = row
       this.nowItemnibianqi = {
            name:row.name,
            type:row.type,
            reg_addr:row.reg_addr,
            enable:row.enable,
            rated:row.rated,
            grid_connect_group_id:this.nowBingwangdian.id,
        }
        this.addInverters = true
     },
     //确定新增修改逆变器
     addInvertersFn(){
         if(this.nowItemnibianqi.name === ""){
              this.$message({showClose: true,message: '逆变器名称不能为空',type: 'warning'});
              return
        }
        if(this.nowItemnibianqi.reg_addr === ""){
              this.$message({showClose: true,message: '寄存器地址不能为空',type: 'warning'});
              return
        }
        if(this.nowItemnibianqi.type === ""){
              this.$message({showClose: true,message: '类型不能为空',type: 'warning'});
              return
        }
        if(this.nowItemnibianqi.rated === ""){
              this.$message({showClose: true,message: '逆变器功率不能为空',type: 'warning'});
              return
        }
        if(this.caozuoType3 == "新增逆变器"){
              var dd = {
                  name:this.nowItemnibianqi.name ,
                  type:Number(this.nowItemnibianqi.type),
                  reg_addr:Number(this.nowItemnibianqi.reg_addr),
                  enable:Number(this.nowItemnibianqi.enable),
                  rated:Number(this.nowItemnibianqi.rated),
                  grid_connect_group_id:Number(this.nowItemnibianqi.grid_connect_group_id),
              }
              this.diaisMask = true
              saveInverters(dd).then(res => {
                   this.diaisMask = false
                   if(res.code == 200){
                       this.addInverters = false
                      this.getNibianqi()
                      this.$message({showClose: true,message: '新增成功',type: 'success'});
                   }else {
                      this.$message({showClose: true,message: res.msg ? res.msg : '新增失败',type: 'error'});
                   }
              })
        }else {
              var dd = {
                  id:this.editRowNibianqi.id,
                  name:this.nowItemnibianqi.name ,
                  type:Number(this.nowItemnibianqi.type),
                  reg_addr:Number(this.nowItemnibianqi.reg_addr),
                  enable:Number(this.nowItemnibianqi.enable),
                  rated:Number(this.nowItemnibianqi.rated),
                  grid_connect_group_id:Number(this.nowItemnibianqi.grid_connect_group_id),
              }
              this.diaisMask = true
              editInverters(dd).then(res => {
                   this.diaisMask = false
                   if(res.code == 200){
                     this.addInverters = false
                      this.getNibianqi()
                      this.$message({showClose: true,message: '修改成功',type: 'success'});
                   }else {
                      this.getList()
                      this.$message({showClose: true,message: res.msg ? res.msg : '修改失败',type: 'error'});
                   }
              })
        }
     },
     //删除逆变器
     delnibianqi(row){
          this.$confirm(`是否要删除此逆变器？`,'提示',{
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
                this.diaisMask = true
               delInverters({'id':row.id}).then(res => {
                  if(res.code == 200){
                      this.getNibianqi()
                      this.$message({showClose: true,message: '删除成功',type: 'success'});
                   }else {
                    this.diaisMask = false
                      this.$message({showClose: true,message: res.msg ? res.msg : '删除失败',type: 'error'});
                   }
                 
               }).catch(error => {
               })
              
        
                      
            }).catch(() => {
              // ...
            });
     },
  },
};
</script>
<style lang="scss" scoped>
    .boxcon {
         width: 100%;
         height: 100%;
         position: relative;
         .leftname {
             width: 80px !important;
             min-width: 80px !important;
         }
         .con {
             width: 100%;
             height: 100%;
             padding: 12px;
             box-sizing: border-box;
             background-color: #fff;
             .topbtn {
                 display: flex;
                 align-items: center;
                 justify-content: space-between;
                 margin-bottom: 12px;
              }
              
              .mytable {
                 width: 100%;
                 height: calc(100% - 42px);
                 .public-flex {
                     span {
                         font-size: 14px;
                     }
                 }
              }
         }
        

    }
</style>